<template>
  <el-form :label-position="labelPosition" label-width="105px">
    <!--        :model="formLabelAlign"-->
    <el-form-item label="用户工号">
      <el-input v-model="userData.userNum" :disabled="true" @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="用户姓名">
      <el-input v-model="userData.userName" :disabled="true" @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="区域块选择">
      <div class="groupSelect">
        <el-tree v-if="updateData" :data="groupList" :props="defaultProps" show-checkbox accordion node-key="key"
                 :default-checked-keys="checkedKey" @check-change="handleCheckChange"
                 @node-click="handleNodeClick"></el-tree>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
  import axios from 'axios'

  export default {
    props: {
      checkType: String,
      modifyData: Object
    },
    data () {
      return {
        updateData: false,
        labelPosition: 'left',
        blockId: '',
        blockIds:[],
        userData: {
          userNum: '',
          userName: '',
          roleId: '',
          blockIds: []
        },
        groupList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        checkedKey: [],
      }
    },
    methods: {

      getBlocks(){
        console.log('_-_'+this.userData.blockIds)
        let self = this
        console.log('-_-~'+self.checkedKey)
        $.ajax({
          type: 'GET',
          async: false,
          url: this.api + `block/getBlocks/${self.userData.userNum}`,
          headers: {'X-Requested-With':'XMLHttpRequest'},
          xhrFields: {withCredentials: true},
          success(data){
            // if (data.length === 0) {
            //   console.log('-_-'+data)
            //   self.updateData = false
            //   return false
            // } else {
              self.groupList = data
              for (let i = 0; i < data.length; i++) {
                self.groupList[i].code = 0//证明是区域块
                self.groupList[i].key = i + 1//唯一id
                // console.log('123+'+data[i].id)
                if(self.blockIds.length != 0){
                  for(let j = 0;j < self.blockIds.length; j++){
                    if(self.blockIds[j] === self.groupList[i].id){
                      self.checkedKey.push(self.groupList[i].key)
                      // self.checkedKey = Array.from(new Set(self.checkedKey))
                      console.log('Id'+self.blockIds[j])
                      console.log('KEY'+self.groupList[i].key)
                    }
                  }
                }
              }
            }
          // }
        })
      },

      handleCheckChange(data, checked, indeterminate){//其中参数checked代表节点是否被全选，indeterminate代表所选节点状态为有选中但未被全选
        let self = this
        console.log(data,checked)
        self.getBlockIds(data,checked,indeterminate)
      },

      getBlockIds(data, checked, indeterminate){
          console.log(data.id)
          if (checked === true) {
            this.userData.blockIds.push(data.id)
            // console.log('~~~~~'+this.userData.blockIds)
          }else if (checked === false){
            console.log('~~~'+this.userData.blockIds)
            for (let j = 0; j < this.userData.blockIds.length; j++) {
              console.log('~~~~'+this.userData.blockIds[j])
              if (data.id === this.userData.blockIds[j]) {
                this.userData.blockIds.splice(j, 1)
                console.log('~~'+this.userData.blockIds)
              }
            }
          }
        console.log('测试:'+this.checkType)
        this.$emit('getModifyData',this.userData)
      },

      handleChange () {
        console.log(this.checkType)
          this.$emit('getModifyData', this.userData)
      },

      handleNodeClick (data) {
        console.log(data)
        if (data.code === 0) {
          this.blockId = data.id
        }
      },

      clearData () {
        this.userData = {
          userNum: '',
          userName: '',
          roleId: '',
          blockIds: []
        }
        this.blockIds = []
        this.checkedKey = []
        this.updateData = false
        console.log("--"+this.checkedKey + "this.checkedKey")
      }
    },
    mounted () {
        this.getBlocks()
    },
    watch: {
      groupList (newVal) {
        console.log(newVal)
      },

      modifyData (newVal) {
        console.log(newVal.role_id)
        let type = typeof newVal
        if (type === 'object') {
          this.userData.userNum = newVal.id
          this.userData.userName = newVal.name
          this.userData.roleId = newVal.role_id
          for(let j = 0; j < newVal.blocks.length; j++){
            this.userData.blockIds.push(newVal.blocks[j].id)
            // console.log("1")
            this.blockIds.push(newVal.blocks[j].id)
          }
          this.updateData = true
          this.getBlocks()
        } else {
          console.log('~~~~~')
        }
      }
    }
  }
</script>

<style scoped>
  .el-form {
    margin: 10px auto;
    width: 300px;
    height: 400px;
  }

  .el-form-item {
    margin-bottom: 8px;
  }

  .el-form >>> .el-form-item__label {
    font-size: 18px;
  }

  .el-form >>> .el-input__inner {
    height: 32px;
    border: 1px solid #BBB;
  }

  .groupSelect {
    width: 100%;
    height: 275px;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px solid #BBB;
  }

  .el-tree {
    padding: 0;
  }

  .el-tree >>> .el-tree-node__content {
    border-bottom: 1px solid #BBBBBB;
  }
</style>
